(function($) {
	"use strict";
	// 用于做数据对比
	// 1、包含两个图：柱状图和折线图
	// 2、联动：两个图根据条件变化同时刷新
	// 3、数据格式：数据，索引0为柱状图数据，所以1为折线图数据
	// 4、数据格式说明：都是由left/right数据组成图数据，其中left数据为x坐标，right为数据填充
	$.widget("isperp.kpiCompareChart", {

		options : {
			stype : 1,
			chart1 : {
				text : undefined,
				subtext : undefined,
				option : undefined,
				echart : undefined
			},
			chart2 : {
				text : undefined,
				subtext : undefined,
				option : undefined,
				echart : undefined
			},
			colors : [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]
		},

		_create : function() {
			var self = this, o = self.options;
			self._initChart1(self, o);
			self._initChart2(self, o);

			return self;
		},
		_initChart1 : function(self, o) {
			// 初始化图表1--柱状图
			o.chart1.option = {
				title : {
					text : o.chart1.text,
					subtext : o.chart1.subtext
				},
				tooltip : {
					trigger : 'axis'
				},
				toolbox : {
					show : true,
					feature : {
						mark : {
							show : true
						},
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					data : [ "" ],
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : [ {
					name : "",
					itemStyle : {
						normal : {
							color : function(params) {

								return o.colors[params.dataIndex]
							},
							label : {
								show : true,
								position : 'top',
								formatter : '{b}\n{c}'
							}
						}
					},
					data : [ "" ],
					type : 'bar',
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				} ]
			};

			o.chart1.echart = echarts.init(document.getElementById(self.element.attr("id") + '_chart1'));
			o.chart1.echart.on(echarts.config.EVENT.CLICK, function(param) {
				openKpiDataView(param, true);
			});
			o.chart1.echart.setOption(o.chart1.option, true);
		},
		_initChart2 : function(self, o) {
			// 初始化图表2--折线图
			o.chart2.option = {
				title : {
					text : o.chart2.text,
					subtext : o.chart2.subtext
				},
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ "" ]
				},
				toolbox : {
					show : true,
					feature : {
						mark : {
							show : true
						},
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					data : [ '' ]

				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : [ {
					name : "",
					type : 'line',
					data : [ "" ]

				} ]
			};

			o.chart2.echart = echarts.init(document.getElementById(self.element.attr("id") + '_chart2'));

			o.chart2.echart.setOption(o.chart2.option, true);
		},
		_afterLoadData1 : function(stype, option) {
			var o = this.options;
			o.chart1.echart.showLoading();
			o.chart1.echart.clear();

			o.chart1.echart.setOption(o.chart1.option);
			if (option) {
				o.chart1.data = _cloneObj(option);
			} else {
				option = _cloneObj(o.chart1.data);
			}
			if (option.xAxis[0].data) {
				var lenA = option.xAxis[0].data.length;
				if (lenA > 10) {
					if (stype == 10) {
						option.xAxis[0].data = option.xAxis[0].data.slice(0, 10);
						option.series[0].data = option.series[0].data.slice(0, 10);
					} else if (stype == -10) {

						option.xAxis[0].data = option.xAxis[0].data.slice(lenA - 10, lenA - 1);
						option.series[0].data = option.series[0].data.slice(lenA - 10, lenA - 1);
					}
				}
				o.chart1.echart.setOption(option, false);
			}
			o.chart1.echart.hideLoading();
		},
		_afterLoadData2 : function(stype, option) {

			var o = this.options;
			o.chart2.echart.showLoading();
			o.chart2.echart.clear();

			o.chart2.echart.setOption(o.chart1.option);
			if (option) {
				o.chart2.data = _cloneObj(option);
			} else {
				option = _cloneObj(o.chart2.data);
			}

			if (option.legend && option.legend.data) {

				var lenA = option.legend.data.length;

				if (lenA > 10) {
					if (stype == 10) {
						option.legend.data = option.legend.data.slice(0, 10);
						// option.xAxis[0].data =
						// option.xAxis[0].data.slice(lenA -
						// 10,
						// lenA - 1);
						option.series = option.series.slice(0, 10);
					} else if (stype == -10) {

						option.legend.data = option.legend.data.slice(lenA - 10, lenA - 1);
						// option.xAxis[0].data =
						// option.xAxis[0].data.slice(lenA -
						// 10,
						// lenA - 1);

						for ( var i = 0; i < 10; i++) {
							option.series[lenA - 10 + i].itemStyle = option.series[i].itemStyle;
						}
						option.series = option.series.slice(lenA - 10, lenA - 1);

					}
				}

			}
			o.chart2.echart.setOption(option, false);
			o.chart2.echart.hideLoading();
		},
		loadData : function(loadOption) {

			var $this = this;
			if (loadOption.reload || !this.options.chart1.data) {
				$.getJSON("kpi/data/getData1?q" + loadOption.url, function(option) {
					$this._afterLoadData1(loadOption.stype, option);
				});
			} else {
				$this._afterLoadData1(loadOption.stype, undefined);
			}

			if (loadOption.reload || !this.options.chart1.data) {
				$.getJSON("kpi/data/getData2?q" + loadOption.url, function(option) {
					$this._afterLoadData2(loadOption.stype, option);
				});

			} else {
				$this._afterLoadData2(loadOption.stype, undefined);
			}

		},
		reload : function(d, date) {
			// 刷新：根据所载入的数据刷新界面显示（组装数据）
			// 如果图表有多个，需要按设定交互规则联动
		},
		restore : function() {
			var o = this.options;
			// 重置为原始状态
			o.chart1.echart.restore();
			o.chart1.echart.restore();
		},
		clear : function() {
			var o = this.options;
			o.chart1.echart.clear();
			o.chart2.echart.clear();
		},
		dispose : function() {
			var o = this.options;
			o.chart1.echart.dispose();
			o.chart2.echart.dispose();
		},
		create : function() {

			return self;
		}

	});

})(jQuery);

function _cloneObj(obj) {
	var o;
	switch (typeof obj) {
	case 'undefined':
		break;
	case 'string':
		o = obj + '';
		break;
	case 'number':
		o = obj - 0;
		break;
	case 'boolean':
		o = obj;
		break;
	case 'object':
		if (obj === null) {
			o = null;
		} else {
			if (obj instanceof Array) {
				o = [];
				for ( var i = 0, len = obj.length; i < len; i++) {
					o.push(_cloneObj(obj[i]));
				}
			} else {
				o = {};
				for ( var k in obj) {
					o[k] = _cloneObj(obj[k]);
				}
			}
		}
		break;
	default:
		o = obj;
		break;
	}
	return o;
}